<template>
    <div class="m-container">
      <h3>欢迎来到{{user.username}}的博客</h3>

      <div class="block">
        <el-avatar shape="square" :size="50" :src="user.avatar"></el-avatar>
          <div>{{user.username}}</div>
      </div>
      <div class="maction">
        <el-link type="primary" href="/blogs">主页</el-link>
        <el-divider direction="vertical"></el-divider>
        <el-link type="success" href="/blog/add">发表文章</el-link>
        <el-divider direction="vertical"></el-divider>
        <span v-show="!hasLogin">
        <el-link type="warning" href="/login">登录</el-link>

        <el-divider direction="vertical"></el-divider></span>
        <span v-show="hasLogin">
        <el-link type="danger" @click="logout">退出</el-link>
          </span>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
      data () {
        return {
          user:{
          username: "请先登录",
          avatar: ""
         }
        }
      },
      methods: {
          logout() {
            const that = this;
            that.$axios.post("/logout",{
              headers:{
                "Authorization": localStorage.getItem("token")
              }
            }).then(res =>{
              that.$store.commit("REMOVE_INFO")
              that.$router.push("/login")
            })
          }
      },
      created() {
          if(this.$store.getters.getUser.username){
            this.user.username = this.$store.getters.getUser.username;
            this.user.avatar = this.$store.getters.getUser.avatar;
            this.hasLogin = true;
          }
      }
    }
</script>

<style scoped>

  .m-container{
    margin: 0 auto;
    max-width: 950px;
    text-align: center;
  }

  .maction{
    margin: 10px;
  }
</style>
